<template>
  <div class="container">
    <div class="header">舆情信息</div>
    <div class="tablePanle">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="标题">
          <template slot-scope="scope">
            <span>{{ scope.row.title || '--' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="significance" label="重要性">
          <template slot-scope="scope">
            <i class="el-icon-star-off"></i>
            <i class="el-icon-star-off"></i>
            <i class="el-icon-star-off"></i>
          </template>
        </el-table-column> -->
        <el-table-column prop="reportTime" label="发布时间">
          <template slot-scope="scope">
            <span>{{ scope.row.reportTime || '--' }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="resource" label="来源">
          <template slot-scope="scope">
            <span>{{ scope.row.resource || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="beRead" label="发布时间">
          <template slot-scope="scope">
            <span>{{ scope.row.beRead == 1 ? '未读' : '已读' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              style="color: #1f9bfd; cursor: pointer"
              @click="toLookDetail(scope.row)"
            >
              详情
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageFn"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="舆情详情"
      width="80%"
      :visible.sync="dialogVisible"
      :before-close="() => (dialogVisible = false)"
    >
      <div class="iframe-modal">
        <iframe
          :src="content"
          style="width: 100%; min-height: 500px"
          class="iframe"
        ></iframe>
      </div>
      <!-- <div class="detail-title">
        <h1>{{ detailInfo.title }}</h1>
        <div>
          <span class="info">日期：{{ detailInfo.date }}</span>
          <span class="info">来源：{{ detailInfo.source }}</span>
          <span class="info">作者：{{ detailInfo.author }}</span>
        </div>
      </div>
      <div class="detail-info1">
        <span>新闻相关公司：</span>
        <span>{{ detailInfo.info1 }}</span>
      </div>
      <div class="detail-info2">
        <span>负面影响相关公司：</span>
        <span>
          <el-link href="" target="_blank" type="warning">{{
            detailInfo.info2
          }}</el-link></span
        >
      </div>
      <div class="detail-info3">
        <div>同公司负面新闻：</div>
        <div class="info-list">
          <div
            v-for="(item, index) in detailInfo.info3"
            :key="index"
            class="info-item"
          >
            <span class="flex-item1">
              <el-link href="" target="_blank" type="warning">{{
                item.content
              }}</el-link></span
            >
            <span class="flex-item2">{{ item.source }}</span>
            <span class="flex-item3">{{ item.date }}</span>
          </div>
        </div>
      </div>
      <div class="detail-info3">
        <div>同公司所有新闻：</div>
        <div class="info-list">
          <div
            v-for="(item, index) in detailInfo.info4"
            :key="index"
            class="info-item"
          >
            <span class="flex-item1">
              <el-link href="" target="_blank" type="warning">{{
                item.content
              }}</el-link></span
            >
            <span class="flex-item2">{{ item.source }}</span>
            <span class="flex-item3">{{ item.date }}</span>
          </div>
        </div>
      </div> -->
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetCustomerSentimentInfoApi } from '../../../../api/customerManagement/informationOverview.js';
import { haveRead } from '@/api/customerList/index.js';
import moment from 'moment';
export default {
  props: {
    type: {
      type: String | Number,
    },
    customerId: {
      type: String,
    },
  },
  watch: {
    customerId: {
      handler(val) {
        if (val) {
          this.loadData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      total: 10,
      dialogVisible: false,
      tableData: [],
      detailInfo: {
        title: '因并表管理内部审计存在不足等 建设银行收170万元罚单',
        date: '2024-01-15',
        source: '黄河新闻网',
        author: '韩雨新',
        info1: '中国建设银行股份有限公司',
        info2: '中国建设银行股份有限公司',
        info3: [
          {
            content: '因并表管理内部审计存在不足等 建设银行收170万元罚单',
            source: '黄河新闻网',
            date: '2024-01-15',
          },
          {
            content: '息差收窄，四大行盈利增速放缓',
            source: '大公网',
            date: '2023-08-31',
          },
          // {
          //   content: "突发！千亿集团董事长被查，六天前曾发表廉政讲话",
          //   source: "华夏时报",
          //   date: "2022-09-04 17:11:00",
          // },
          // {
          //   content: "突发！千亿集团董事长被查，六天前曾发表廉政讲话",
          //   source: "华夏时报",
          //   date: "2022-09-04 17:11:00",
          // },
          // {
          //   content: "突发！千亿集团董事长被查，六天前曾发表廉政讲话",
          //   source: "华夏时报",
          //   date: "2022-09-04 17:11:00",
          // },
        ],
        info4: [
          {
            content: '因并表管理内部审计存在不足等 建设银行收170万元罚单',
            source: '黄河新闻网',
            date: '2024-01-15',
          },
          {
            content: '息差收窄，四大行盈利增速放缓',
            source: '大公网',
            date: '2023-08-31',
          },
          {
            content:
              '建行嘉兴分行：为奋力谱写中国式现代化嘉兴新篇章贡献金融力量',
            source: '中国网浪潮新闻',
            date: '2023-02-21',
          },
          {
            content: '发挥资源优势，中国建设银行助力普惠金融发展',
            source: '人民论坛网',
            date: '2022-12-15',
          },
        ],
        info: {},
        total: 0,
        content: '',
      },
    };
  },
  methods: {
    async loadData() {
      const params = {
        customerId: this.customerId,
      };
      const { data } = await GetCustomerSentimentInfoApi(params);
      this.info = data;
      this.tableData = data.records || [];
      this.total = data.total || 0;
      console.log(data);
    },
    async toLookDetail(item) {
      this.content = item.content;
      this.dialogVisible = true;
      item.reportTime = moment(item.reportTime).valueOf();
      const res = await haveRead(item);
      console.log(res);
    },
    pageFn() {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  // padding: 0 16px;
  height: calc(100vh - 160px);
  overflow: scroll;
  .iframe-modal {
    width: 100%;
  }
  .header {
    background: #354060;
    line-height: 50px;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
  }
  .tablePanle {
    margin: 0 16px;
    margin-bottom: 16px;
    ::v-deep .el-table {
      min-height: 500px;
      width: 100%;
      .el-table__body {
        width: 100% !important;
      }
      .el-table__empty-block {
        width: 100% !important;
      }
      th.el-table__cell {
        background-color: #1c2238 !important;
        color: #fff;
      }
    }
    .pagination {
      float: right;
      margin: 20px 0;
    }
  }
}
.detail-title {
  text-align: center;
  margin-bottom: 20px;
  .info {
    margin-right: 20px;
    color: #d6dcff;
  }
}
.detail-info1 {
  height: 28px;
  line-height: 28px;
  span:last-child {
    color: #d6dcff;
  }
}
.detail-info2 {
  height: 28px;
  line-height: 28px;
}
.detail-info3 {
  margin-top: 20px;
  .info-list {
    .info-item {
      display: flex;
      flex-wrap: wrap;
      padding: 2px 10px;
      color: #d6dcff;
      .flex-item1 {
        text-align: left;
        width: 500px;
      }
      .flex-item2 {
        text-align: center;
        width: 200px;
        margin-left: 200px;
      }
      .flex-item3 {
        text-align: right;
        margin-left: 200px;
      }
    }
  }
}
</style>
